<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>控制计划</title>
<link rel="stylesheet" type="text/css" href="css/hui.css" />
<link rel="stylesheet" type="text/css" href="css/my.css" />
<link rel="stylesheet" type="text/css" href="css/main_R.css" />
<link rel="stylesheet" type="text/css" href="css/iosSelect.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
    <style>
    	.listbg{background:#fff;border-bottom: 1px solid #eaeaea;}
    	.hui-form-items-title{text-align: right;width: 20%;margin-right: 2%;color:#666;}
    	.listmartop{margin-top: 5px;}
    	.vue-treeselect__control{border-radius: 0;}
    	#hui-back {
		    width: 44px;
		    height: 44px;
		    font-family: "hui-font";
		    line-height: 44px;
		    text-align: center;
		    flex-shrink: 0;
	        margin: 0px auto 0;
		}
		.info_nav .user_head {
		  	display: inline-block;
		    width: 44px;
		    height: 44px;
		  	/*background: #0076FF;*/
		  	border-radius: 50%;
		  	margin: 0px auto 0;
		}
    </style>
</head>
<body style="background:#FCFCFC;overflow: hidden;">
    <div class="topHeight"></div>
	<div class="info_nav">
		<div id="hui-back"></div>
		<h2 class="base_name" style="">控制计划</h2>
		<div class="user_head" style="position: relative;">
			<span style="display: inline-block; line-height: 44px; position: absolute; top: 0px; color: white;">历史</span>
		</div>
	</div>
	<div class="hui-wrap" id="datas">
	        <div class="hui-form-items listbg">
	            <div class="hui-form-items-title">控制类型</div>
	            <div class="hui-form-radios">
	                <!--<input type="checkbox" value="1" name="aihao[]" id="c1" onchange="showCheckRes(this);" /><label for="c1">开关</label>
	                <input type="checkbox" value="2" name="aihao[]" id="c2" onchange="showCheckRes(this);" /><label for="c2">双向控制器</label>-->
	            	<input type="radio" value="0" name="gender" id="g1" checked="checked" /><label for="g1">开关</label>
                	<input type="radio" value="1" name="gender" id="g2" /><label for="g2">双向控制器</label>
	            </div>
	        </div>
			
	        <div class="hui-form-items listbg">
	        	<div class="hui-form-items-title listmartop">计划</div>
	            <div class="hui-form-select">
	                <!--<select class="sensorCode" name="code">
	                    <option v-for="equipment in equipmentList" :data-gid="equipment.GateWayId" :data-gcode="equipment.Code" :data-SensorCode="equipment.SensorCode" :value="equipment.SensorCode" v-html="equipment.SensorName"></option>
	                </select>-->
	                <treeselect v-model="value" :multiple="true" :options="options" :searchable="false" placeholder="请选择控制设备..." />
	            </div>
	        </div>
	        
	        <div class="hui-form-items listbg">
	            <div class="hui-form-items-title">执行模式</div>
	            <div class="hui-form-radios">
	            	<input type="radio" value="-1" name="implement" id="implement1" checked="checked" /><label for="implement1">日期内执行</label>
                	<input type="radio" value="1" name="implement" id="implement2" /><label for="implement2">每日执行</label>
	            </div>
	        </div>
		    <div class="hui-form-items listbg">
		    	<div class="hui-form-items-title listmartop">执行日期</div>
		        <div style="width: 100%; height: 100%; display: flex;">
					<div id="startSelectDate" style="flex-grow: 6;box-sizing: border-box; padding: 6px;">
						<em class="pc-box" style="display: inline-block; width: 100%; text-align: center; background: #f4f4f4;border-radius: 4px; font-size: 14px;">                     
					        <span data-year="" data-month="" data-date="" id="startShowDate">选择开始日期</span>  
					    </em>
					</div>
					<span v-show="implementMode == -1" style="flex-grow: 1; line-height: 35px; text-align: center;">至</span>
					<div v-show="implementMode == -1" id="endSelectDate" style="flex-grow: 6; box-sizing: border-box; padding: 6px;">
						<em class="pc-box" style="display: inline-block; width: 100%; text-align: center; background: #f4f4f4;border-radius: 4px; font-size: 14px;">                     
					        <span data-year="" data-month="" data-date="" id="endShowDate">选择结束日期</span>  
					    </em>
					</div>
				</div>
		    </div>
		    
	        <div class="hui-form-items listbg">
	            <div class="hui-form-items-title listmartop">控制器</div>
	            <div class="hui-form-select">
	                <select class="sensorType">
	                    <option v-if="controlType==1" value="2">展开</option>
	                    <option v-if="controlType==1" value="0">停止</option>
	                    <option v-if="controlType==1" value="3">收缩</option>
	                    <option v-if="controlType==0" value="1">开启</option>
	                    <option v-if="controlType==0" value="0">停止</option>
	                </select>
	            </div>
	        </div>
		    
		    <div class="hui-form-items listbg">
		    	<div class="hui-form-items-title listmartop">操作时间</div>
				<select id="startSeleceHour" style="border: 1px solid #dcdcdc;border-right:none;">
				</select>
				<select id="startSelecemin" style="border: 1px solid #dcdcdc;">
				</select>
				<span style="flex-grow: 1; line-height: 35px; text-align: center;">至</span>
				<select id="endSeleceHour" style="border: 1px solid #dcdcdc;border-right:none;">
				</select>
				<select id="endSelecemin" style="border: 1px solid #dcdcdc;">
				</select>
		    </div>
		    
	        <div class="hui-form-items listbg">
	            <div class="hui-form-items-title listmartop">控制器</div>
	            <div class="hui-form-select">
	                <select class="sensorTypeEnd">
	                    <option v-if="controlType==1" value="2">展开</option>
	                    <option v-if="controlType==1" value="0">停止</option>
	                    <option v-if="controlType==1" value="3">收缩</option>
	                    <option v-if="controlType==0" value="1">开启</option>
	                    <option v-if="controlType==0" value="0">停止</option>
	                </select>
	            </div>
	        </div>
		    <div style="padding:15px 8px;">
		    	<span style="font-size: 12px; color: red;" >注：开始时间与结束时间需大于五分钟</span>
		        <button type="button" class="hui-button hui-primary hui-fr" id="submitBtn">提交数据</button>
		    </div> 
	</div>
<script type="text/javascript" src="js/func/hui.js"></script>
<script src="js/func/jq.js" type="text/javascript" charset="utf-8"></script>
<script src="js/func/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
<script src="js/func/iosSelect.js" type="text/javascript" charset="utf-8"></script>
<script src="js/obj/my.js" type="text/javascript" charset="utf-8"></script>
<script src="js/obj/update.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	
	
	$(function() {
    	Vue.component('treeselect', VueTreeselect.Treeselect)
    	
		var datas = new Vue({
			el: '#datas',
			data: {
				equipmentList: [],
				value: null,
				controlType: 0,
				implementMode: -1,
				options: [],
			},
			methods: {
				controlData: function(){
					let equipment = [];
					let mode = this.controlType == 1 ? 23 : 24;
					$.each(this.equipmentList, function(i,v){
						let value = {}
						if(v.SensorType == mode){
							value.label = v.SensorName
							value.id = v.SensorId
							value.gid = v.GateWayId
							value.gcode = v.Code
							value.codes = v.SensorCode
							equipment.push(value)
						}
					})
					this.options = equipment
					console.log(equipment)
				},
			},
		})
			
		let equipmentList = JSON.parse(localStorage.getItem('equipmentList'));
		if(equipmentList == null || equipmentList == ''){
			hui.alert('当前查看基地暂无控制设备，请选择其他基地！！！');
		}else{
			datas.equipmentList = equipmentList;
			datas.gid = equipmentList[0].GateWayId;
		    datas.controlData();
		}
		//获取控制类型
		$('#g1, #g2').change(function(){
		    var val;
		    hui(this).parent().find('input').each(function(cObj){
		        if(cObj.checked){val = cObj.value;}
		    });
		    datas.controlType = Number(val);
		    datas.controlData();
		})
		
		//获取执行模式
		$('#implement1, #implement2').change(function(){
		    var val;
		    hui(this).parent().find('input').each(function(cObj){
		        if(cObj.checked){val = cObj.value;}
		    });
		    datas.implementMode = Number(val);
		})
		
		selectTime()
		function selectTime(){
			let hourHtml = '', MinutesHtml = '', Minutes = 60;
			for(let i=0; i<Minutes; i++){
				let min = i<10 ? '0' + i : i
				min < 24 ? hourHtml += '<option value="' + min + '">' + min + '时</option>' : '';
				MinutesHtml += '<option value="' + min + '">' + min + '分</option>'
			}
			$('#startSeleceHour, #endSeleceHour').html(hourHtml)
			$('#startSelecemin, #endSelecemin').html(MinutesHtml)
		}
		
		
		
		$('.user_head').click(function(){
			//hui.open("ControlHistory.html?gid=" + datas.gid, {}, true, {});
			hui.open("ConditionControl.html", {}, true, {});
		})
		
		$('#submitBtn').click(function(){
			let dataP = [];
			console.log(datas.value)
			if(datas.value == null || datas.value == ''){
				hui.alert('请选择控制设备！！！');
				return false; 
			}else{
				for(let i=0; i<datas.options.length;i++){
					for(let j=0;j<datas.value.length;j++){
						if(datas.options[i].id == datas.value[j]){
							dataP.push(datas.options[i])
						}
					}
				}
			}
			if(datas.implementMode == 1){
				if(startShowDateDom.text() != '选择开始日期'){
					var startLeave = startShowDateDom.text();
					var startTime = startLeave.substring(0,4) + startLeave.substring(6,8) + startLeave.substring(10,12) + $('#startSeleceHour').find("option:selected").val() + $('#startSelecemin').find("option:selected").val();
			   		var endTime = startLeave.substring(0,4) + startLeave.substring(6,8) + startLeave.substring(10,12) + $('#endSeleceHour').find("option:selected").val() + $('#endSelecemin').find("option:selected").val();
					if(startTime > endTime){
				   		hui.alert('时间错误！！！');
						return false;
					}
				}else{
					hui.alert('请选择日期！！！');
					return false;
				}
			}else{
				if(startShowDateDom.text() != '选择开始日期' && endShowDateDom.text() != '选择结束日期'){
					var startLeave = startShowDateDom.text();
				   	var endLeave = endShowDateDom.text();
				   
				   	var startTime = startLeave.substring(0,4) + startLeave.substring(6,8) + startLeave.substring(10,12) + $('#startSeleceHour').find("option:selected").val() + $('#startSelecemin').find("option:selected").val();
				   	var endTime = endLeave.substring(0,4) + endLeave.substring(6,8) + endLeave.substring(10,12) + $('#endSeleceHour').find("option:selected").val() + $('#endSelecemin').find("option:selected").val();
					
					if(startTime > endTime){
				   		hui.alert('时间错误！！！');
						return false;
					}
				}else{
					hui.alert('请选择正确的时间！！！');
					return false;
				}
			}
			let name = '',
				gid = '',
				codes = '',
				gcode = '',
				sstate = $('.sensorType').find("option:selected").val(),
				estate = $('.sensorTypeEnd').find("option:selected").val(),
				type = datas.controlType,
				stime = startTime,
				etime = endTime,
				desc = '定时启动设备',
				repeat = datas.implementMode;
			
			
			$.each(dataP, function(i,v){
				i == dataP.length -1 ? name += v.label : name += v.label+',';
				i == dataP.length -1 ? gid += v.gid : gid += v.gid+',';
				i == dataP.length -1 ? gcode += v.gcode : gcode += v.gcode+',';
				i == dataP.length -1 ? codes += v.codes : codes += v.codes+',';
			})
			
			var param = {
				name: name,
				gid: gid,
				codes: codes,
				sstate: sstate,
				estate: estate,
				type: type,
				gcode:	gcode,
				stime: stime,
				etime: etime,
				desc: desc,
				repeat: repeat,
			};
			console.log(param)
			postJson('http://sensor.sureserve.cn/interfaces/control_handler.ashx?action=plan_add', param, function(ret) {
				console.log(ret)
				if(ret.result == 0){
					hui.alert('添加计划成功！！！');
					setTimeout(() => {
						//hui.Back();
					},1000)
				}
			})
		})
		
		
		   
		
		
		//时间选择
		   
		var startSelectDateDom = $('#startSelectDate');
	    var startShowDateDom = $('#startShowDate');
	    
	    var endSelectDateDom = $('#endSelectDate');
	    var endShowDateDom = $('#endShowDate');
	    // 初始化时间
	    var now = new Date();
	    var nowYear = now.getFullYear();
	    var nowMonth = ((now.getMonth()+1) < 10 ? ('0' + (now.getMonth()+1)) : (now.getMonth()+1));
	    var nowDate = (now.getDate() < 10 ?('0' + now.getDate()) : now.getDate());
	    var nowHour = (now.getHours() < 10 ?('0' + now.getHours()) : now.getHours());
	    var nowMin = (now.getMinutes() < 10 ?('0' + now.getMinutes()) : now.getMinutes());
	    
	    
	    startShowDateDom.attr('data-year', nowYear);
	    startShowDateDom.attr('data-month', nowMonth);
	    startShowDateDom.attr('data-date', nowDate);
	    startShowDateDom.attr('data-hours', nowHour);
	    startShowDateDom.attr('data-min', nowMin);
	    
	    endShowDateDom.attr('data-year', nowYear);
	    endShowDateDom.attr('data-month', nowMonth);
	    endShowDateDom.attr('data-date', nowDate);
	    endShowDateDom.attr('data-hours', nowHour);
	    endShowDateDom.attr('data-min', nowMin);
	    
	    // 数据初始化
	    function formatYear (nowYear) {
	        var arr = [];
	        for (var i = nowYear - 5; i <= nowYear + 5; i++) {
	            arr.push({
	                id: i + '',
	                value: i + '年'
	            });
	        }
	        return arr;
	    }
	    function formatMonth () {
	        var arr = [];
	        for (var i = 1; i <= 12; i++) {
	        	if(i < 10){
	        		i = '0' + i;
	        	}
	            arr.push({
	                id: i + '',
	                value: i + '月'
	            });
	        }
	        return arr;
	    }
	    function formatDate (count) {
	        var arr = [];
	        for (var i = 1; i <= count; i++) {
	        	if(i < 10){
	        		i = '0' + i;
	        	}
	            arr.push({
	                id: i + '',
	                value: i + '日'
	            });
	        }
	        return arr;
	    }
	    var yearData = function(callback) {
	        callback(formatYear(nowYear))
	    }
	    var monthData = function (year, callback) {
	        callback(formatMonth());
	    };
	    var dateData = function (year, month, callback) {
	        if (/^(01|03|05|07|08|10|12)$/.test(month)) {
	            callback(formatDate(31));
	        }
	        else if (/^(04|06|09|11)$/.test(month)) {
	            callback(formatDate(30));
	        }
	        else if (/^02$/.test(month)) {
	            if (year % 4 === 0 && year % 100 !==0 || year % 400 === 0) {
	                callback(formatDate(29));
	            }
	            else {
	                callback(formatDate(28));
	            }
	        }
	        else {
	            throw new Error('month is illegal');
	        }
	    };
	    var hourData = function(one, two, three, callback) {
	        var hours = [];
	        for (var i = 0,len = 24; i < len; i++) {
	        	if(i < 10){
	        		i = '0' + i;
	        	}
	            hours.push({
	                id: i,
	                value: i + '时'
	            });
	        }
	        callback(hours);
	    };
	    var minuteData = function(one, two, three, four, callback) {
	        var minutes = [];
	        for (var i = 0, len = 60; i < len; i++) {
	        	if(i < 10){
	        		i = '0' + i;
	        	}
	            minutes.push({
	                id: i,
	                value: i + '分'
	            });
	        }
	        callback(minutes);
	    };
	    
	    var leaveNum = 0;
	    
	    startSelectDateDom.bind('click', function () {
	        var oneLevelId = startShowDateDom.attr('data-year');
	        var twoLevelId = startShowDateDom.attr('data-month');
	        var threeLevelId = startShowDateDom.attr('data-date');
	        var fourLevelId = startShowDateDom.attr('data-hour');
	        var fiveLevelId = startShowDateDom.attr('data-minute');
	        startLeaveTime(startShowDateDom, oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId);
	        
	    });
	    endSelectDateDom.bind('click', function () {
	        var oneLevelId = endShowDateDom.attr('data-year');
	        var twoLevelId = endShowDateDom.attr('data-month');
	        var threeLevelId = endShowDateDom.attr('data-date');
	        var fourLevelId = endShowDateDom.attr('data-hour');
	        var fiveLevelId = endShowDateDom.attr('data-minute');
	        endLeaveTime(endShowDateDom, oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId);
	        
	    });
    
	   
	   function startEnd(){
		   if(startShowDateDom.text() != '点击选择开始时间'){
			   console.log(startShowDateDom.text());
		   }
		   if(endShowDateDom.text() != '点击选择结束时间'){
			   console.log(endShowDateDom.text());
		   }
		   
		   if(startShowDateDom.text() != '点击选择开始时间' && endShowDateDom.text() != '点击选择结束时间'){
		   	
			   	var startLeave = startShowDateDom.text();
			   	var endLeave = endShowDateDom.text();
			   	var startTime = startLeave.substring(0,4) + '-' + startLeave.substring(6,8) + '-' + startLeave.substring(10,12) + ' ' + startLeave.substring(14,16) + ':' + startLeave.substring(18,20) + ':' + '00';
			   	var endTime = endLeave.substring(0,4) + '-' + endLeave.substring(6,8) + '-' + endLeave.substring(10,12) + ' ' + endLeave.substring(14,16) + ':' + endLeave.substring(18,20) + ':' + '00';
			   	
	                    console.log(startTime);
	                    console.log(endTime);
			   	let Rdate = getRemainderTime(startTime, endTime).split(',');
			   	console.log(Rdate)
			   	/*if(Rdate[Rdate.length-1] < 5){
			   		hui.alert('开始时间与结束时间需大于五分钟！！！');
			   	}*/
			   	if(startTime > endTime){
			   		hui.alert('时间错误！！');
					return false;
				}
			   	
		   }
	   }
	   
		function getRemainderTime (startTime, endTime){
		    var s1 = new Date(startTime.replace(/-/g, "/")),
		    s2 = new Date(endTime.replace(/-/g, "/")),
		    runTime = parseInt((s2.getTime() - s1.getTime()) / 1000);
		    var year = Math.floor(runTime / 86400 / 365);
		    runTime = runTime % (86400 * 365);
		    var month = Math.floor(runTime / 86400 / 30);
		    runTime = runTime % (86400 * 30);
		    var day = Math.floor(runTime / 86400);
		    runTime = runTime % 86400;
		    var hour = Math.floor(runTime / 3600);
		    runTime = runTime % 3600;
		    var minute = Math.floor(runTime / 60);
		    runTime = runTime % 60;
		    var second = runTime;
		   	// console.log(year,month,day,hour,minute,second);
		　　	return year+','+month+','+day+','+hour+','+minute;
		 
		}
		
	    function startLeaveTime(ShowDateDom, oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId) {
			var iosSelect = new IosSelect(3, 
	            [yearData, monthData, dateData, hourData, minuteData],
	            {
	                title: '时间选择',
	                itemHeight: 35,
	                itemShowCount: 9,
	                oneLevelId: oneLevelId,
	                twoLevelId: twoLevelId,
	                threeLevelId: threeLevelId,
	                fourLevelId: fourLevelId,
	                fiveLevelId: fiveLevelId,
	                callback: function (selectOneObj, selectTwoObj, selectThreeObj, selectFourObj, selectFiveObj) {
	                    ShowDateDom.attr('data-year', selectOneObj.id);
	                    ShowDateDom.attr('data-month', selectTwoObj.id);
	                    ShowDateDom.attr('data-date', selectThreeObj.id);
	                    ShowDateDom.attr('data-hour', selectFourObj.id);
	                    ShowDateDom.attr('data-minute', selectFiveObj.id);
	                    ShowDateDom.html(selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value);
	                   	 
	                }
	        });
		}
		
	    function endLeaveTime(ShowDateDom, oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId) {
			var iosSelect = new IosSelect(3, 
	            [yearData, monthData, dateData, hourData, minuteData],
	            {
	                title: '时间选择',
	                itemHeight: 35,
	                itemShowCount: 9,
	                oneLevelId: oneLevelId,
	                twoLevelId: twoLevelId,
	                threeLevelId: threeLevelId,
	                fourLevelId: fourLevelId,
	                fiveLevelId: fiveLevelId,
	                callback: function (selectOneObj, selectTwoObj, selectThreeObj, selectFourObj, selectFiveObj) {
	                    ShowDateDom.attr('data-year', selectOneObj.id);
	                    ShowDateDom.attr('data-month', selectTwoObj.id);
	                    ShowDateDom.attr('data-date', selectThreeObj.id);
	                    ShowDateDom.attr('data-hour', selectFourObj.id);
	                    ShowDateDom.attr('data-minute', selectFiveObj.id);
	                    ShowDateDom.html(selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value);
	                    
	                }
	        });
		}
		
	})
	

	
			
</script>
</body>
</html>